<template>
  <panel title="最近7天总开门成功率统计">
    <div class="ml20 mr20">
      <x-row v-if="show">
        <x-col :span="24">
          <Bar :width="chartWidth" :height="chartHeight" :options="chartOptions"></Bar>
        </x-col>
      </x-row>
    </div>
  </panel>
</template>

<script>
import formatDate from 'filters/format-date'
import filters from 'filters'

export default {
  name: 'openSuccessRate',

  props: ['controlInfo'],

  data () {
    return {
      show: false,
      chartWidth: '400px',
      chartHeight: '230px',
      floorDatasDefault: {
        '东南门': '99.7%',
        '西南门': '100%',
        '西北门': '99.7%',
        '东侧门': '99.2%'
      }
    }
  },

  computed: {
    floorDatas () {
      let phases = this.$store.getters.phase
      if (!phases || !phases.length) {
        return this.floorDatasDefault
      }

      let defaultData = _.clone(this.floorDatasDefault)

      _.forEach(phases, (item) => {
        let data = item.data['psum'] || 0
        if (data >= 1000) {
          data = parseInt(data)
        } else {
          data = filters.toFixed(data)
        }
        defaultData[item.room] += data
      })
      return _.clone(defaultData)
    },
    chartOptions () {
      let dataTotal = []
      let doorName = []
      // for (let i in this.floorDatas) {
      //   // console.log(this.floorDatas[i])
      //   this.floorDatas[i] = parseInt(this.floorDatas[i])
      //   data.push(this.floorDatas[i])
      // }
      if (this.controlInfo && this.controlInfo.length) {
        this.controlInfo.forEach(door => {
          if (door.list && door.list.length) {
            // if (!door.list[0] || !door.list.gateName) return
            doorName.push(door.list[0].gateName)
            let total = 0
            for (let i = 7, len = 0; i > len; i--) {
              if (door.list && door.list.length) {
                let dataCount = _.filter(door.list, (res) => {
                  return res.openDate === formatDate(new Date() - 60 * 1000 * 60 * 24 * i, 'yyyy-MM-dd', true)
                })
                if (dataCount && dataCount.length) {
                  dataCount.forEach(item => {
                    total += item.count
                  })
                }
              }
            }
            dataTotal.push(total)
          }
        })
      }
      return {
        grid: {
          containLabel: true,
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '10%'
        },
        yAxis: [{
          type: 'value'
        }],
        xAxis: [{
          type: 'category',
          // data: ['东南门', '西南门', '西北门', '东侧门']
          data: doorName
        }],
        series: [{
          name: '总开门成功率',
          type: 'bar',
          stack: '电量',
          barWidth: 17,
          data: dataTotal,
          label: {
            normal: {
              show: true,
              position: 'top',
              formatter: '{c0}%',
              textStyle: {
                color: '#AEAEAE'
              }
            }
          }
        }],
        tooltip: {
          formatter: '{b0}: {c0}%'
        }
      }
    }
  },

  mounted () {
    setTimeout(this.initialize, 0)
  },

  methods: {
    initialize () {
      this.chartWidth = `${(this.$el.clientWidth - 40)}px`
      this.chartHeight = `${this.$el.clientHeight - 31}px`
      this.show = true
    }
  }
}
</script>
